<template>
 <!-- 十八项反措中部 -->
  <div class="echa">
        <v-chart :auto-resize="true" :options="polar" />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({
  components: {},
})
export default class EighteenCenter extends Vue {
  @Prop({ default:()=>[]})
  xAxisData:Array<string>|undefined;
  @Prop({ default:()=>[]})
  dataList:Array<any>|undefined;
  public polar: Object = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      right: "2%",
      top: "2%",
      textStyle: {    
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      data:["变压器类", "电抗器类", "断路器类", "GIS类", "电容器设备类",
        "sheirenyanzhongyoufeicuisheirenyanzhongyouzankoubujuekuweiwuwuwujiubeihanxueandshei"
      ],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      name: "数量：条",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    // dataZoom: [
    //   {
    //     show: true,
    //     height: 12,
    //     xAxisIndex: [0],
    //     bottom: "5%",
    //     start: 10,
    //     end: 90,
    //     handleIcon:
    //       "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
    //     handleSize: "110%",
    //     handleStyle: {
    //       color: "#d3dee5",
    //     },
    //     backgroundColor: "rgba(5,180,255,0.2)",
    //     fillerColor: "rgba(5,180,255,1)",
    //     textStyle: {
    //       color: "#fff",
    //     },
    //     borderColor: "rgba(5,180,255,0.1)",
    //   },
    //   {
    //     type: "inside",
    //     show: true,
    //     height: 15,

    //     start: 1,
    //     end: 35,
    //   },
    // ],
    series: [
      {
        backgroundColor: 'red',
        name: (this as any).xAxisData[0],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data:[400, 500, 500, 500, 500, 400],
      },
    ],
  };
  
  @Watch("dataList", { immediate: true, deep: true })
  getBarData(dataList: any) {
    var total: any[]=[]
    var early: any[]=[]
    var onLine: any[]=[]
    var xAxisData: any[]=[]
    dataList.map((v: any,i: number)=>{ 
      total[i]=v.total
      early[i]=v.early
      onLine[i]=v.onLine
      xAxisData[i]=v.name
    });
      (this as any).polar.series[0].data=total;
      (this as any).polar.xAxis.data=xAxisData;
    
  }
    mounted () {
      // console.log(this.xAxisData);
      
  }
}
</script>
<style lang="scss" scoped>
.echa {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
